<template>
  <div class="activity-status">
    <ul class="activity-list" v-if="active != 1">
      <li v-for="(item, i) in list" :key="item" @click="handle(i)" :class="{ active: index == i }" class="item">{{ item }}</li>
    </ul>
    <main class="main">
      <div class="good-info" @click="toUrl(item)" v-for="(item, index) in listData" :key="index">
        <div class="good-head">
          <span class="time" v-if="active == 1 || active == 0">{{ item.created_at }}</span>
          <div class="apply-member" v-else-if="active == 2">
            <div>报名者：</div>
            <van-image round width="1.4375rem" height="1.4375rem" fit="cover" v-if="item.member" :src="item.member.avatar_image" />
            <div v-if="item.member">{{ item.member.nickname }}</div>
          </div>
          <span class="main-color" v-if="active !== 0">{{ item.status_text }}</span>
        </div>
        <div class="good-center">
          <div class="good-img">
            <van-image width="3.4375rem" height="3.4375rem" fit="cover" v-if="item.belongs_to_activity" :src="item.belongs_to_activity.images[0].url" />
          </div>
          <div style="width: 100%;">
            <div class="title" v-if="item.belongs_to_activity">{{ item.belongs_to_activity.title }}</div>
            <div class="crowd-message">
              <template v-if="active == 1">
                <span
                  >已筹：<span class="main-color">{{ $i18n.t("money") }}{{ item.preparation_amount }}</span></span
                >
                <span class="number-people"
                  >支持人数：<span class="main-color">{{ item.support_count }}</span></span
                ></template
              >
              <template v-else-if="active == 2">
                <span class="main-color" @click.stop="payShowTap(item.id)">支持金额：{{ $i18n.t("money") }}{{ item.current_member_support_amount }}&nbsp;></span>
              </template>
              <template v-else>
                <span class="main-color">{{ $i18n.t("money") }}{{ item.preparation_amount }}</span>
              </template>
            </div>
          </div>
        </div>
        <div class="footer" v-if="active == 1 && item.belongs_to_activity">截止时间：{{ item.belongs_to_activity.end_at_text }}</div>
      </div>
      <div class="infolist" v-if="listData.length <= 0">没有更多了</div>
    </main>
    <van-popup v-model="payShow" round position="bottom" :style="{ height: '18.75rem' }">
      <van-nav-bar>
        <template #title>
          <span class="navtitle">支付记录</span>
        </template>
        <template #right>
          <van-icon name="cross" color="#000" @click="payShow = false" />
        </template>
      </van-nav-bar>
      <div class="paylist" v-for="(item, index) in allUserShowList.data" :key="index">
        <div class="line">
          <div class="ordersn">支付单号：{{ item.order_sn }}</div>
          <div class="payprice">{{ $i18n.t("money") }}{{ item.amount }}</div>
        </div>
        <div class="paytime">{{ item.created_at }}</div>
      </div>
      <div class="allUserListMore" @click="payShowTap(payId, true)" v-if="allUserShowList.last_page > allUserpage">加载更多</div>
    </van-popup>
  </div>
</template>
<script>
import { Image as VanImage } from "vant";
export default {
  props: ["active", "listData", "crowdfund_diy_name"],
  name: "Activity",
  components: { VanImage },
  data() {
    return {
      list: [],
      index: 0,
      payShow: false,
      // 全部报名人员
      allUserShowList: [],
      allUserpage: 1,
      payId: ""
    };
  },
  watch: {
    active: function(nval, oval) {
      if (nval) {
        this.index = 0;
      }
    },
    crowdfund_diy_name: function(nval, oval) {
      if (nval) {
        this.list = ["全部", "进行中", nval + "成功", nval + "失败"];
      }
    }
  },
  methods: {
    payShowTap(id, ismore = false) {
      if (ismore) {
        this.allUserpage = this.allUserpage + 1;
      } else {
        this.payId = id;
      }
      $http
        .get("plugin.crowdfunding.frontend.activity-order.memberRecords", { page: this.allUserpage, activity_member_id: id }, "加载中")
        .then(response => {
          if (response.result === 1) {
            this.payShow = true;
            if (ismore == true) {
              if (response.data.data.length > 0) {
                this.allUserShowList.data = this.allUserShowList.data.concat(response.data.data);
              }
            } else {
              this.allUserShowList = response.data;
            }
          } else {
            Toast(res.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    toUrl(item) {
      if (this.active == 1) {
        this.$router.push(this.fun.getUrl("crowd_activity_good", { id: item.activity_id }));
      } else {
        this.$router.push(this.fun.getUrl("crowd_activity_funding", { id: item.id }));
      }
    },
    handle(i) {
      this.index = i;
      this.$emit("childIndex", this.index);
    }
  }
};
</script>
<style lang="scss" scoped>
.navtitle {
  font-size: 1rem;
  font-weight: 600;
  color: #3b3b4a;
}

.paylist {
  margin: 0 0.9375rem;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding-bottom: 0.9375rem;
  padding-top: 0.9375rem;
  border-bottom: 1px #f1f1f1 solid;

  .line {
    display: flex;

    .ordersn {
      flex: 1;
      font-size: 0.75rem;
      font-weight: 400;
      color: #2b2b2b;
    }

    .payprice {
      flex-shrink: 0;
      font-weight: 400;
      color: #f00;
      font-size: 0.625rem;
    }
  }

  .paytime {
    margin-top: 0.75rem;
    font-weight: 400;
    color: #aaaab3;
    font-size: 0.6875rem;
  }
}

.activity-status {
  .active {
    background-color: #f00;
    color: #fff;
    transition: all 0.3s ease;
  }

  .item {
    padding: 0.3125rem 0.75rem;
    border-radius: 0.1875rem;
    font-size: 14px;
  }

  .activity-list {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0.7813rem 0 0.7813rem;
    color: #6e6e79;
  }

  .apply-member {
    display: flex;
    align-items: center;
  }

  .main {
    .title {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .crowd-message {
      margin-top: 0.55rem;
      font-size: 0.625rem;
    }

    .good-center {
      display: flex;
      margin-top: 0.625rem;
      margin-bottom: 0.5625rem;
      text-align: left;
    }

    .good-img {
      margin-right: 0.4375rem;
    }

    .number-people {
      margin-left: 1.4375rem;
    }

    .footer {
      text-align: left;
      font-size: 0.625rem;
      color: #ff7200;
      margin-top: 0.5625rem;
    }

    .good-info {
      background-color: #fff;
      border-radius: 0.3125rem;
      margin: 10px;
      padding: 0.625rem 1.375rem 0.5625rem 0.625rem;
    }
  }

  .good-head {
    font-size: 0.625rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .time {
      color: #999;
    }
  }

  .main-color {
    color: #f00;
  }
}

.infolist {
  text-align: center;
  color: #999;
  margin-top: 1rem;
}

.allUserListMore {
  padding-bottom: 1rem;
  color: #999;
  text-align: center;
}
</style>
